<template>
  <div class="bike-detail-container">
    <!-- 页面标题和返回按钮 -->
    <div class="header-section">
      <div class="back-button" @click="goBack">
        <el-icon><ArrowLeft /></el-icon>
        <span>返回</span>
      </div>
      <h1 class="page-title">车辆详情</h1>
    </div>
    
    <!-- 车辆详情内容 -->
    <div v-if="currentBike" class="detail-content" :class="{ 'fade-in': isLoaded }">
      <div class="detail-header">
        <div class="image-container">
          <img 
            :src="currentBike.imageUrl" 
            :alt="currentBike.name" 
            class="bike-image"
            @mouseenter="handleImageEnter"
            @mouseleave="handleImageLeave">
          <div class="image-mask" :class="{ 'scale': isImageHover }"></div>
        </div>
        <div class="info-container" :class="{ 'slide-up': isLoaded }">
          <h2 class="bike-name">{{ currentBike.name }}</h2>
          <div class="bike-status">
            <el-tag :type="getStatusType(currentBike.status)">{{ currentBike.status }}</el-tag>
          </div>
          <div class="bike-type">类型: {{ currentBike.type }}</div>
        </div>
      </div>
      
      <div class="detail-sections">
        <!-- 基本信息 -->
        <div class="detail-section" :class="{ 'slide-up': isLoaded }">
          <h3 class="section-title">基本信息</h3>
          <div class="info-list">
            <div 
              v-for="(item, index) in basicInfo" 
              :key="index" 
              :class="{ 'fade-in-delay': isLoaded, 'delay-' : index }"
              class="info-item"
            >
              <span class="item-label">{{ item.label }}:</span>
              <span class="item-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
        
        <!-- 车辆描述 -->
        <div class="detail-section description-section" :class="{ 'slide-up': isLoaded }">
          <h3 class="section-title">车辆描述</h3>
          <div class="description" :class="{ 'fade-in-delay': isLoaded, 'delay-3': isLoaded }">
            {{ currentBike.description }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载中状态 -->
    <div v-else class="loading-state">
      <el-loading type="spinner" size="large" color="#409EFF" />
      <p class="loading-text">加载车辆详情中...</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'

// 获取路由实例和当前路由
const route = useRoute()
const router = useRouter()

// 车辆数据（模拟数据，实际项目中应从API获取）
const bikes = ref([])
const getData =()=>{
  getUserData().then(res=>{
    console.log('',res.data)
  })
}


// 当前车辆数据
const currentBike = ref(null)
const isLoaded = ref(false)
const isImageHover = ref(false)

// 基本信息列表（优化数据结构）
const basicInfo = ref([
  { label: "购买日期", value: "" },
  { label: "车架材质", value: "" },
  { label: "变速系统", value: "" }
])

// 状态类型转换
const getStatusType = (status) => {
  const types = {
    "正常使用": "success",
    "维修中": "warning",
    "已出售": "info"
  }
  return types[status] || 'default'
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 图片悬停处理
const handleImageEnter = () => {
  isImageHover.value = true
}

const handleImageLeave = () => {
  isImageHover.value = false
}

// 根据ID获取车辆数据
const fetchBikeDetail = (id) => {
  // 在实际项目中，这里应该调用API获取数据
  // 这里使用模拟数据
  const bike = bikes.value.find(bike => bike.id === id)
  if (bike) {
    currentBike.value = bike
    // 填充基本信息
    basicInfo.value = [
      { label: "购买日期", value: bike.purchaseDate },
      { label: "车架材质", value: bike.frameMaterial },
      { label: "变速系统", value: bike.gearSystem }
    ]
    
    // 模拟数据加载延迟，展示加载动画
    setTimeout(() => {
      isLoaded.value = true
    }, 300)
  } else {
    // 处理车辆不存在的情况
    router.push('/not-found') // 假设存在404页面
  }
}

// 监听路由变化，获取新的车辆ID
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      isLoaded.value = false // 重置加载状态
      fetchBikeDetail(Number(newId))
    }
  }
)

// 组件挂载时获取车辆数据
onMounted(() => {
  if (route.params.id) {
    fetchBikeDetail(Number(route.params.id))
  }
})
</script>

<style lang="less" scoped>
// 主色调 - 活力蓝，辅助色 - 亮橙色，中性色 - 浅灰和白色
@primary-color: #409EFF;
@secondary-color: #FF7A45;
@light-gray: #F5F7FA;
@medium-gray: #E5E9F2;
@dark-gray: #4E5969;

.bike-detail-container {
  padding: 0;
  max-width: 100%;
  margin: 0;
  background-color: @light-gray;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden; // 隐藏水平滚动条
  
  .header-section {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 30px 15px;
    background-color: white;
    position: relative;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    
    .back-button {
      display: flex;
      align-items: center;
      color: @dark-gray;
      cursor: pointer;
      margin-right: 20px;
      font-size: 14px;
      font-weight: 500;
      
      &:hover {
        color: @primary-color;
        transform: translateX(-5px);
        transition: all 0.3s ease;
      }
      
      .el-icon {
        margin-right: 8px;
        font-size: 18px;
      }
    }
    
    .page-title {
      font-size: 28px;
      color: #2C3E50;
      font-weight: 700;
      margin: 0;
      position: relative;
      padding-bottom: 10px;
      
      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background-color: @primary-color;
        border-radius: 3px;
      }
    }
  }
  
  .detail-content {
    background-color: white;
    border-radius: 0;
    box-shadow: none;
    padding: 30px 15px;
    position: relative;
    
    // 装饰元素
    &:before {
      display: none; // 移除装饰边框
    }
    
    .detail-header {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 30px;
      
      .image-container {
        flex: 1 1 100%;
        min-width: 100%;
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        
        .bike-image {
          width: 100%;
          height: 280px;
          border-radius: 12px;
          transition: transform 0.5s ease;
          display: block;
          object-fit: cover;
        }
        
        .image-mask {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1));
          border-radius: 12px;
          transition: transform 0.3s ease;
          transform: scale(1);
        }
        
        &:hover .bike-image {
          transform: scale(1.03);
        }
        
        &:hover .image-mask {
          transform: scale(1.05);
        }
      }
      
      .info-container {
        flex: 1 1 100%;
        animation-delay: 0.2s;
        
        .bike-name {
          font-size: 32px;
          font-weight: 700;
          color: #2C3E50;
          margin-bottom: 15px;
          display: inline-block;
          position: relative;
          
          &:after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, @primary-color, @secondary-color);
            border-radius: 3px;
          }
        }
        
        .bike-status {
          margin-bottom: 10px;
        }
        
        .bike-type {
          color: @dark-gray;
          font-size: 16px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          
          &:before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: @primary-color;
            border-radius: 50%;
            margin-right: 6px;
          }
        }
      }
    }
    
    .detail-sections {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      
      .detail-section {
        flex: 1 1 100%;
        min-width: 100%;
        
        .section-title {
          font-size: 22px;
          font-weight: 600;
          color: #2C3E50;
          margin-bottom: 20px;
          padding-bottom: 10px;
          border-bottom: 2px solid @medium-gray;
          position: relative;
          
          &:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 30%;
            height: 2px;
            background-color: @primary-color;
          }
        }
        
        .info-list {
          display: flex;
          flex-direction: column;
          gap: 15px;
        }
        
        .info-item {
          display: flex;
          align-items: flex-start;
          padding: 12px;
          background-color: #FAFAFA;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          
          .item-label {
            font-weight: 500;
            width: 100px;
            color: @dark-gray;
            flex-shrink: 0;
            font-size: 14px;
          }
          
          .item-value {
            color: #2C3E50;
            line-height: 1.6;
            font-size: 14px;
            flex: 1;
          }
        }
        
        .description {
          color: #2C3E50;
          line-height: 1.8;
          white-space: pre-wrap;
          font-size: 14px;
          padding: 15px;
          background-color: #FAFAFA;
          border-radius: 8px;
          border-left: 3px solid @primary-color;
          margin-top: 5px;
        }
      }
    }
  }
  
  .loading-state {
    text-align: center;
    padding: 80px 15px;
    
    .el-loading {
      margin-bottom: 15px;
    }
    
    .loading-text {
      color: @dark-gray;
      font-size: 16px;
      font-weight: 500;
    }
  }
  
  // 动画效果
  .fade-in {
    animation: fadeIn 0.6s ease forwards;
  }
  
  .slide-up {
    animation: slideUp 0.6s ease forwards;
  }
  
  .fade-in-delay {
    animation: fadeInDelay 0.6s ease forwards;
  }
  
  .delay-1 {
    animation-delay: 0.1s;
  }
  
  .delay-2 {
    animation-delay: 0.2s;
  }
  
  .delay-3 {
    animation-delay: 0.3s;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideUp {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInDelay {
    from { 
      opacity: 0;
      transform: translateX(-15px);
    }
    to { 
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    .header-section {
      padding: 20px 15px;
    }
    
    .detail-content {
      padding: 25px 15px;
    }
    
    .bike-name {
      font-size: 28px !important;
    }
  }
  
  @media (max-width: 480px) {
    .header-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 15px;
    }
    
    .detail-content {
      padding: 20px 15px;
    }
    
    .info-item {
      flex-direction: column;
      
      .item-label {
        width: 100%;
        margin-bottom: 5px;
        font-size: 14px;
      }
      
      .item-value {
        font-size: 14px;
      }
    }
  }
}
</style>